<template>
  <div class="container">
    <el-row>
      <el-form :model="formInline" @keyup.enter.native="search">
        <el-col :span="6" align="left">
          <el-form-item :label="$t('m.in.ordernumber')" :label-width="formLabelWidth">
            <el-input maxlength="30" show-word-limit v-model="formInline.ordercode"></el-input>
          </el-form-item>
          <el-form-item label="SKU" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.productspeccode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" align="left">
          <el-form-item :label="$t('m.out.storeordercode')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.storeordercode" placeholder></el-input>
          </el-form-item>
          <el-form-item label="SupplierCode" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.suppliercode" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" align="left">
          <el-form-item :label="$t('m.out.ordertype')" :label-width="formLabelWidth">
            <el-select v-model="formInline.ordertype" :placeholder="$t('m.choose')">
              <el-option v-for="item in ordertype" :key="item.id" :label="item.label" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('m.tasknumber')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.tasknumber" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" align="left">
          <el-form-item :label="$t('m.out.tsareaid')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.tsareacode" placeholder></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.out.priority')" :label-width="formLabelWidth">
            <el-select v-model="formInline.priority" :placeholder="$t('m.choose')">
              <el-option v-for="item in priority" :key="item.id" :label="item.label" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-form-item>
            <el-button @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
            <el-button type="primary" @click="doReview" v-if="hasPermission('review')">{{$t('m.review.review')}}</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="ellipse"></div>
    <el-table
      ref="table"
      stripe
      empty-text
      fits
      class="table-wrap single-select-table"
      :data="tableData"
      :row-style="tableRowStyle"
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
      @selection-change="handleSingleSelectionChange"
      v-loading="tableLoading"
    >
      <el-table-column align="center" type="selection" width="55"></el-table-column>
      <el-table-column align="center" type="index" :label="$t('m.index')" width="55"></el-table-column>
      <el-table-column align="center" prop="ordercode" :label="$t('m.in.ordernumber')">
        <template slot-scope="scope">
          <el-button @click.stop="getOrderDetail(scope.row.reviewid)" type="text">{{scope.row.ordercode}}</el-button>
        </template>
      </el-table-column>
      <el-table-column :label="$t('m.out.priority')" align="center" prop="priority" :formatter="priorityFormatter"></el-table-column>
      <el-table-column align="center" prop="storeordercode" :label="$t('m.out.storeordercode')"></el-table-column>
      <!-- <el-table-column align="center" prop="shopname" :label="$t('m.out.shopname')"></el-table-column> -->
      <el-table-column align="center" prop="tsareacode" :label="$t('m.out.tsareaid')"></el-table-column>
      <el-table-column align="center" prop="taskleader" :label="$t('m.charge')"></el-table-column>
      <el-table-column align="center" prop="handlingTime" :label="$t('m.out.handletime')"></el-table-column>
    </el-table>

    <el-pagination background layout="sizes, prev, pager, next, jumper" :page-sizes="pageSizeList" :page-size="rowSize" :current-page="page" :total="totalRows" @current-change="currentChangeInitFn" @size-change="handleSizeChangeInitFn"></el-pagination>
    <!-- 复核 dialog 开始 -->
    <div class="review">
      <el-dialog :close-on-click-modal="false" :fullscreen="true" :title="$t('m.review.reviewtitle')" :visible.sync="dialogFormVisible1" @close="closeReview">
        <div v-loading="popLoading" style="height:100%">
          <el-row :gutter="40">
            <el-col :span="4" align="left">
              <div class="text">
                <p>{{reviewForm.reviewpackagingdetail.productspeccode}}</p>
                <br />
                <!-- 产品ICON start -->
                <div class="productIcon-list">
                  <el-image class="icon-pic-wrap" v-for="(item,index) in iconDtoList" :src="`${filePath}${item.iconimage}`" :key="index">
                    <div slot="error" class="image-slot">
                      <img src="@/assets/defalut.png" alt />
                    </div>
                  </el-image>
                </div>
                <!-- 产品ICON end -->
                <br />
                <!-- remark list start -->
                <p class="remark-item" v-for="(item,index) in remarkList" :key="index">{{item}}</p>
                <!-- remark list end -->
              </div>
            </el-col>
            <el-col :span="12" align="left">
              <div v-if="bigList.length===0" style="height:100%">
                <img src="@/assets/defalut.png" alt />
              </div>
              <div class="block" v-else style="height:100%">
                <el-carousel trigger="click" :autoplay="false" style="height:100%">
                  <el-carousel-item style="height:100%" v-for="(item,index) in bigList" :key="index">
                    <img :src="`${filePath}${item.FilePath}`" />
                  </el-carousel-item>
                </el-carousel>
              </div>
            </el-col>
            <el-col :span="6">
              <el-form :model="submitForm" ref="submitForm">
                <div class="number-block">
                  <p v-if="all">{{revied}}/{{all}}</p>
                </div>
                <el-row>
                  <el-col :span="24">
                    <el-form-item :rules="[
      { required: true, message: ' ', trigger: 'change' }
    ]" :label="$t('m.tasknumber')" :label-width="formLabelWidth" prop="tasknumber">
                      <el-input ref="tasknumber" maxlength="20" show-word-limit @input="func" @keyup.enter.native="getInfoEnter" v-model.trim="submitForm.tasknumber" placeholder></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item :rules="[
      { required: true, message: ' ', trigger: 'change' }
    ]" label="SKU" :label-width="formLabelWidth" prop="productspeccode">
                      <el-input ref="productspeccode" maxlength="20" show-word-limit @input="func2" @keyup.enter.native="getSkuInfoEnter" v-model.trim="submitForm.productspeccode" placeholder></el-input>
                    </el-form-item>
                  </el-col>
                  <!-- ,{ type: 'number',min:0, message:' '} -->
                  <el-col :span="24">
                    <el-form-item :rules="[
      { required: true, message: ' ', trigger: 'change' }
    ]" :label="$t('m.sigin.signquantity')" :label-width="formLabelWidth" prop="quantity">
                      <el-input @keyup.enter.native="!isdisable&&saveTask()" @input="validateNumber" ref="quantity" maxlength="4" show-word-limit v-model.number="submitForm.quantity" placeholder></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div class="btns">
                <el-button :disabled="isdisable" type="primary" @click="saveTask">{{$t('m.confirm')}}</el-button>
              </div>
            </el-col>
            <el-col :span="2">
              <!-- 缺货标识 -->
                  <div v-if="reviewWithDetails.outstock===1" class="sign"><span>{{$t('m.out.lack')}}</span></div>
              <!-- 缺货标识 -->
              <div class="btns" style="margin-top:100px">
                <el-button style="height:100%;width:40px;" type="text" @click="openDetail">
                  {{$t('m.out.detail')}}
                  <!-- <i class="el-icon-arrow-right"></i> -->
                </el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-dialog>
    </div>
    <!-- 复核 dialog 结束 -->

    <div class="detail">
      <el-dialog :close-on-click-modal="true" width="1200px" :title="$t('m.out.detail')" :visible.sync="dialogFormVisible2" @close="closeDetail">
        <div style="margin-bottom:30px;text-align:right">
          <el-button @click="filterData(0)">{{$t('m.all')}}</el-button>
          <el-button @click="filterData(2)">{{$t('m.review.state2')}}</el-button>
          <el-button @click="filterData(1)">{{$t('m.review.state1')}}</el-button>
          <el-button @click="filterData(20)">{{$t('m.review.state3')}}</el-button>
        </div>
        <el-table ref="singleTable" :data="reviewForm.reviewpackagingdetails" highlight-current-row :row-class-name="rowClassName">
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column align="center" width="150" :label="$t('m.tasknumber')" prop="tasknumber"></el-table-column>
          <el-table-column align="center" label="SKU" prop="productspeccode"></el-table-column>
          <!-- <el-table-column align="center" label="SupplierCode" prop="suppliercode"></el-table-column> -->
          <!-- <el-table-column align="center" :label="$t('m.state')" prop="state">
            <template slot-scope="scope">
              <span v-if="scope.row.state==1">{{$t('m.review.state1')}}</span>
              <span v-if="scope.row.state==2">{{$t('m.review.state2')}}</span>
              <span v-if="scope.row.state==3">{{$t('m.review.state3')}}</span>
            </template>
          </el-table-column>-->
          <el-table-column align="center" :label="$t('m.in.productname')" prop="productname"></el-table-column>
          <el-table-column align="center" :label="$t('m.in.productspec')" prop="productspec"></el-table-column>
          <el-table-column align="center" :label="$t('m.review.stockoutquantity')" prop="stockoutquantity"></el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import common from '@/utils/common'
import { getLodop } from '@/utils/LodopFuncs'
export default {
  name:'ReviewPackaging',
  data(){
    let onlyNumber = (rule, value, callback) => {
      if (!/^\+?[0-9]\d*$/.test(value) && value){
        return callback(new Error(this.$t('m.onlynumber')))
      }
      callback()
    }
    return {
      orderClick:0,
      bigList:[],
      ruleBoxForm:{
        packagenumber:[
          { validator:onlyNumber, trigger:'blur' }
        ]
      },
      bulkitems:'',
      printContent:'',
      blur:true, //判断是否触发blur事件
      blur2:true,
      popLoading:false,
      currentRow:null,
      formInline:{
        ordercode:'',
        ordertype:'',
        shippingaddress:'',
        shopid:'',
        productspeccode:'',
        stateid:null,
        storeordercode:'',
        warehouseid:null,
        suppliercode:null,
        tsareacode:'',
        priority:''
      },
      reviewWithDetails:{},
      tableData:[],
      dialogFormVisible1:false,
      dialogFormVisible2:false,
      formLabelWidth:'120px',
      reviewForm:{
        reviewpackagingdetail:{
          bulkitems:null,
          cartons:null,
          createid:null,
          creator:'',
          detailid:null,
          productid:null,
          productname:'',
          productspec:'',
          productspeccode:'',
          quantity:null,
          reviewid:null,
          suppliercode:'',
          tasknumber:''
        },
        packingrate:null,
        scanBarcode:null,
        reviewpackagingdetails:[]
      },
      reviewDetailOutputs:[],
      reviewid:null,
      picLink:'',
      reviewpackagingdetail:[],
      submitForm:{
        tasknumber:'',
        productspeccode:'',
        quantity:null
      },
      isdisable:false,
      revied:null,
      cancelled:null, //已取消任务
      all:null,
      filePath:window._config_.filepath, // 图片域名
      remarkList:[], // remark数组
      iconDtoList:[] // 产品ICON
    }
  },
  computed:{
    states(){
      return [
        {
          id:null,
          label:this.$t('m.all')
        },
        {
          id:1,
          label:this.$t('m.quality.state1')
        },
        {
          id:2,
          label:this.$t('m.out.state2')
        },
        {
          id:3,
          label:this.$t('m.out.state3')
        },
        {
          id:4,
          label:this.$t('m.review.state1')
        },
        {
          id:5,
          label:this.$t('m.out.state5')
        }
      ]
    },
    ordertype(){
      return [
        {
          id:null,
          label:this.$t('m.all')
        },
        {
          id:1,
          label:this.$t('m.out.ordertype1')
        },
        {
          id:2,
          label:this.$t('m.out.ordertype2')
        }
      ]
    },
    pickingtype(){
      return [
        {
          id:1,
          label:this.$t('m.out.pickingtype1')
        },
        {
          id:2,
          label:this.$t('m.out.pickingtype2')
        }
      ]
    },
    priority(){
      return[
        {
          id:null,
          label:this.$t('m.all')
        },
        {
          id:0,
          label:this.$t('m.out.normal')
        },
        {
          id:1,
          label:this.$t('m.out.priority1')
        }
      ]
    }
  },
  methods:{
    priorityFormatter(row){
      return row.priority == 1 ? this.$t('m.out.priority1') : this.$t('m.out.normal')
    },
    validateNumber(value){
      this.submitForm.quantity = value.replace(/[^\d]/g, '')
    },
    init(){
      this.tableLoading = true
      this.$axios({
        method:'get',
        url:'/reviewpackaging/page',
        params:Object.assign({}, this.formInline, {
          page:this.page,
          rows:this.rowSize
        })
      }).then(({ data }) => {
        for (let i = 0;i < data.records.length;i++){
          data.records[
            i
          ].receivingdate = common.timestampToTime(
            data.records[i].receivingdate
          )
        }
        this.tableData = data.records
        this.totalRows = data.total
        setTimeout(() => this.tableLoading = false, 500)
        this.tableData.forEach(v => {
          if (v.handlingTime){
            v.handlingTime = this.formatSeconds(v.handlingTime)
          } else {
            v.handlingTime = '- -'
          }
        })
      })
    },
    formatSeconds(value){
      let result = parseInt(value)
      // let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600)
      let m = Math.floor((result / 60)) < 10 ? '0' + Math.floor((result / 60)) : Math.floor((result / 60))
      let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60))
      result = `${m}:${s}`
      return result
    },
    search(){
      this.page = 1
      this.init()
    },
    closeDetail(){
      this.dialogFormVisible2 = false
      if (this.orderClick === 1){
        this.reviewForm.reviewpackagingdetails = []
        this.reviewpackagingdetail = []
      } else {
        this.reviewForm.reviewpackagingdetails = this.reviewpackagingdetail
      }

    },
    closeReview(){
      this.$refs['submitForm'].resetFields()
      this.dialogFormVisible1 = false
      this.reviewForm = {
        reviewpackagingdetail:{
          bulkitems:null,
          cartons:null,
          createid:null,
          creator:'',
          detailid:null,
          productid:null,
          productname:'',
          productspec:'',
          productspeccode:'',
          quantity:null,
          reviewid:null,
          suppliercode:'',
          tasknumber:''
        },
        packingrate:null,
        scanBarcode:null,
        reviewpackagingdetails:[]
      }
      this.picLink = ''
      this.init()
      this.isdisable = false
      this.all = null
      this.revied = null
      this.bigList = []
    },
    doReview(){
      this.reviewWithDetails.outstock = ''
      this.dialogFormVisible1 = true
      this.$nextTick(() => {
        this.$refs.tasknumber.focus() //输入框默认获取焦点
      })
    },
    openDetail(){
      this.dialogFormVisible2 = true
    },
    func(){
      //通过input事件改变blur的值，避免在enter之后blur事件不能被触发
      this.blur = true
    },
    getInfoEnter(){
      // 重置清空左侧相关信息
      this.bigList = []
      this.remarkList = []
      this.iconDtoList = []
      this.reviewForm.reviewpackagingdetail.productspeccode = ''
      this.blur = false
      this.getInfo()
    },
    getInfoBlur(){
      this.getInfo()
    },
    getOrderDetail(reviewid){
      this.orderClick = 1
      this
        .$axios({
          method:'get',
          url:`/reviewpackaging/getreviewwithdetails/${reviewid}`
        }).then(({ data }) => {
          this.dialogFormVisible2 = true
          this.reviewForm.reviewpackagingdetails = data.reviewDetailOutputs
          this.reviewpackagingdetail = JSON.parse(JSON.stringify(data.reviewDetailOutputs))
        })
    },
    getInfo(){
      this.orderClick = 0
      this.picLink = ''
      this.submitForm.productspeccode = ''
      this.submitForm.quantity = null
      this.reviewForm.reviewpackagingdetails = []
      if (this.submitForm.tasknumber){
        this
          .$axios({
            method:'get',
            url:`/reviewpackaging/getdetailbytasknumber/${this.submitForm.tasknumber}`
          })
          .then(({ data }) => {
            this.reviewWithDetails = data.reviewWithDetails
            this.scanBarcode = data.scanBarcode
            this.reviewid = data.reviewpackagingdetail.reviewid
            this.reviewForm = data
            this.reviewForm.reviewpackagingdetails = data.reviewWithDetails.reviewDetailOutputs
            this.reviewpackagingdetail = JSON.parse(JSON.stringify(this.reviewForm.reviewpackagingdetails))
            let cancelled = this.reviewpackagingdetail.filter(v => {
              return v.state === 20
            })
            this.all = this.reviewpackagingdetail.length - cancelled.length
            let arr = this.reviewpackagingdetail.filter(v => {
              return v.state === 2
            })
            this.revied = arr.length
            if (data.reviewpackagingdetail.state === 2){
              this.callbackMessage(this.$t('m.review.state2'))
              this.isdisable = true
              this.$refs.tasknumber.select()//如果已复核，可以再次扫描任务号
            } else if(data.reviewpackagingdetail.state === 20){
              this.callbackMessage(this.$t('m.review.state3'))
            } else {
              this.$refs.productspeccode.focus() //输入框默认获取焦点
              this.isdisable = false
              if (this.scanBarcode === 0){
                this.submitForm.productspeccode = this.reviewForm.reviewpackagingdetail.productspeccode
                this.getPicture()
              } else {
                this.$message(this.$t('m.review.scan'))
              }
            }
            this.popLoading = false
            // this.$nextTick(() => {
            //   this.$refs.productspeccode.focus() //输入框默认获取焦点
            // })

          }).catch(() => {
            this.submitForm.quantity = null
            this.submitForm.productspeccode = ''
          })
      }
    },
    func2(){
      //通过input事件改变blur的值，避免在enter之后blur事件不能被触发
      this.blur2 = true
    },
    getSkuInfoEnter(){
      this.blur2 = false
      this.getSkuInfo()
    },
    getSkuInfoBlur(){
      this.getSkuInfo()
    },
    getSkuInfo(){
      if (this.submitForm.productspeccode){
        this
          .$axios({
            method:'get',
            url:`/reviewpackaging/getdetailbytasknumberandsku`,
            params:{
              tasknumber:this.submitForm.tasknumber,
              sku:this.submitForm.productspeccode
            }
          })
          .then(({ data }) => {
            if (this.scanBarcode === 1){
              this.$refs.productspeccode.select()
              this.submitForm.quantity++
            } else {
              this.reviewForm = data
            }
            this.getPicture()
            this.popLoading = false
          })
      }
    },
    rowClassName({ row }){
      if (row.tasknumber === this.submitForm.tasknumber){
        return 'warning-row'
      }
      //通过每行的state值判断，如果是2则已经完成，变绿色
      if (row.state === 2){
        return 'success-row'
      } else if(row.state === 20){
        return 'cancel-row'
      }
      return ''
    },
    filterData(opt){
      // 0:全部，1：已复核，2：待复核，20：已取消
      if (!opt) this.reviewForm.reviewpackagingdetails = this.reviewpackagingdetail
      else this.reviewForm.reviewpackagingdetails = this.reviewpackagingdetail.filter((v) => v.state === opt)
      this.$forceUpdate()
    },
    //保存一条任务
    saveTask(){
      this.$refs['submitForm'].validate(valid => {
        if (valid){
          if (
            parseInt(this.submitForm.quantity) ===
            parseInt(this.reviewForm.reviewpackagingdetail.quantity)
          ){
            let obj = {
              detailid:this.reviewForm.reviewpackagingdetail.detailid
            }
            this
              .$axios({
                method:'put',
                url:'/reviewpackaging/updatedetail',
                data:obj
              })
              .then(() => {
                this.$message({
                  showClose:true,
                  message:this.$t('m.quality.success'),
                  type:'success',
                  duration:1000
                })
                this
                  .$axios({
                    method:'get',
                    url:`/reviewpackaging/getdetailbytasknumber/${this.submitForm.tasknumber}`
                  })
                  .then(({ data }) => {
                    this.reviewid = data.reviewpackagingdetail.reviewid
                    this.reviewForm = data
                    this.reviewForm.reviewpackagingdetails = data.reviewWithDetails.reviewDetailOutputs

                    this.reviewpackagingdetail = JSON.parse(JSON.stringify(this.reviewForm.reviewpackagingdetails))
                    let arr = this.reviewpackagingdetail.filter(v => {
                      return v.state === 2
                    })
                    this.revied = arr.length
                    // if(this.revied===this.all){

                    // }
                    this.$refs.tasknumber.select()
                    this.submitForm.productspeccode = ''
                    this.submitForm.quantity = null
                  })
              })
          } else {
            this.$message({
              showClose:true,
              message:this.$t('m.review.count'),
              type:'warning',
              duration:2000
            })
          }
        }
      })
    },
    getPicture(){
      this.bigList = []
      if (this.submitForm.productspeccode){
        this
          .$axios({
            method:'get',
            url:'/sku/picture',
            params:{
              sku:this.submitForm.productspeccode
            }
          })
          .then(({ data }) => {
            this.bigList = data.quantitypicture === '[{}]' ? [] : JSON.parse(data.quantitypicture)
            this.remarkList = []
            for (let key in data){
              if (key.includes('remark')) this.remarkList.push(data[key])
            }
            this.iconDtoList = data.iconDtoList || []
          })
      }
    },
    print(){
      if (this.tableRowSelected.length > 0){
        let LODOP = getLodop()
        let obj = {
          ids:[Number(this.tableRowSelected[0].reviewid)],
          templateName:'packing'
        }
        this.$axios({
          method:'post',
          url:'/printtemplate/query',
          data:obj
        }).then(({ data }) => {
          this.printContent = data
          eval(this.printContent)
          LODOP.SET_PRINT_PAGESIZE(1, '100mm', '73mm', '')
          LODOP.PREVIEW()
          this.page = 1
          this.init()
        })
      } else {
        this.$message({
          showClose:true,
          message:this.$t('m.chooseprint') + this.$t('m.review.reviewcode'),
          type:'warning',
          duration:1000
        })
      }
    }
  },
  activated(){
    this.init()
  },
  beforeRouteLeave(to, form, next){
    this.dialogFormVisible1 = false
    next()
  }
}
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}

.btns .el-button {
  width: 80%;
  height: 80px;
  font-size: 36px;
}

::v-deep.review .el-form-item__label {
  font-size: 28px;
  line-height: 80px;
  height: 80px;
}
::v-deep.review .el-input__inner {
  font-size: 28px;
  height: 80px;
}
::v-deep.review .el-dialog__headerbtn {
  font-size: 50px !important;
}

::v-deep.review .el-form-item {
  margin-bottom: 40px;
}

::v-deep.review .el-form-item__error {
  font-size: 25px;
}

::v-deep.detail .el-dialog__headerbtn {
  font-size: 50px !important;
}

::v-deep.detail .el-dialog__header .el-dialog__title {
  font-size: 30px;
}
::v-deep.review .el-dialog__body {
  height: calc(100% - 120px);
}
::v-deep.review .el-row,
::v-deep.review .el-col-12 {
  height: 100%;
}
::v-deep.review .el-carousel__container {
  height: 100%;
}

::v-deep.review .el-carousel__arrow i {
  font-size: 45px;
}
::v-deep.review .el-carousel__arrow {
  width: 50px;
  height: 50px;
}

::v-deep.review .el-dialog__header .el-dialog__title {
  font-size: 30px;
}
::v-deep.review img {
  height: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: block;
}
.text p {
  font-size: 26px;
}
.number-block {
  width: 100%;
  height: 80px;
  background-color: #409eff;
  text-align: center;
  font-size: 36px;
  color: #fff;
  line-height: 80px;
  margin-bottom: 40px;
}
.productIcon-list {
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  .el-image {
    margin-right: 4px;
  }
}
.icon-pic-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  ::v-deep img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
}
::v-deep.el-table .cancel-row {
  background-color: #f78e8e;
  &:hover>td{
    background-color: #f78e8e;
  }
  & td{
    background-color: #f78e8e;
  }
}
.sign {
  background-color: #e23f53;
  line-height: 60px;
  width: 60px;
  height: 60px;
  border-radius: 32px;
    span {
      font-size: 18px;
      font-weight: bold;
      color: #fff;
    }
}
</style>